<template>
  <div class="audition151">
    <p>1. 普通实现：</p>
    <v-md-preview :text="text1" />
    <p>2. 在执行指定次数后自动结束</p>
    <v-md-preview :text="text2" />
    <p>3. 可以清除的定时器</p>
    <v-md-preview :text="text3" />
    <p>推荐阅读完整版解释：<a href="https://blog.csdn.net/tuzi007a/article/details/121286430" target="_blank">实现过程</a></p>
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition151',
  data() {
    return {
      text1: `${prefix}
      function interval(fn, delay) {
        function inner() {
          fn()
          setTimeout(inner, delay);
        }
        setTimeout(inner, delay);
      }
      // 测试
      interval(function () {
        console.log(1);
      }, 1000)
      \n${suffix}`,
      text2: `${prefix}
      // n 是要求执行的次数
      function interval(fn, delay, n) {
        function inner() {
          fn();
          setTimeout(inner, delay);
          clearTimeout(n + 1);
        }
        setTimeout(inner, delay);
      }
      // 测试 假定要求执行4次后结束
      interval(function () {
        console.log(1);
      }, 1000, 4)
      \n${suffix}`,
      text3: `${prefix}
      var timer = null;
      function interval(fn, delay) {
        function inner() {
          fn();
          timer = setTimeout(inner, delay);
        }
        timer = setTimeout(inner, delay);
        return timer;
      }
      // 测试
      interval(function() {
        console.log(111);
      }, 1000)

      setTimeout(function () {
        clearTimeout(timer);
      }, 4000)
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>